<template>
  <div class="blackBox container-fluid">
    <div class="row justify-content-md-around justify-content-center font">
      <div class="col-md-4 col-10">
        <p>联系我们</p>
        <p>深圳中科鑫智有限公司</p>
        <div class="info">
          <div class="imgBox"><img src="http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/1cc7197a-f21f-469f-80dc-40b2c7fbf31e.png" /></div>
          <div class="body">
            <span>联系电话</span>
            <span>188 1411 4118</span>
          </div>
        </div>
        <div class="info">
          <div class="imgBox"><img src="http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/f1bee583-df29-4018-90ab-a343ecc75325.png" /></div>
          <div class="body">
            <span>电子邮箱</span>
            <span>188 1411 4118</span>
          </div>
        </div>
        <div class="info">
          <div class="imgBox"><img src="http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/b01fee2a-6a54-4dff-b29f-fd34e12bcaab.png" /></div>
          <div class="body">
            <span>公司地址</span>
            <span>深圳市南山区粤海街道豪威科技大厦</span>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-10 map">
        <baidu-map :center="center" :zoom="zoom" @ready="handler" style="padding:2rem 2rem;height:33.13rem" @click="getClickInfo" :scroll-wheel-zoom='true'>
        </baidu-map>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      center: { lng: 113.959075, lat: 22.539179 },
      zoom: 18,
     
    }
  },
  methods: {
    handler({ BMap, map }) {
      var point = new BMap.Point(113.959075, 22.539179)
      map.centerAndZoom(point, 18)
      var marker = new BMap.Marker(point) // 创建标注
      map.addOverlay(marker) // 将标注添加到地图中
      var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
      map.addOverlay(circle)
    },
    getClickInfo(e) {
      console.log(e.point.lng)
      console.log(e.point.lat)
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    }
  }
}
</script>

<style lang="less" scoped>
.blackBox {
  padding: 6.19rem 0rem !important;
  background-color: #f7f7f7;
  .font {
    display: flex;
    align-items: center;
    p {
      text-align: left;
    }
    p:nth-child(1) {
      font-size: 2.25rem;
      font-weight: 500;
    }
    p:nth-child(2) {
      font-size: 1.5rem;
      font-weight: 500;
    }
    .info {
      display: flex;
      align-items: center;
      .imgBox {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.13rem;
        height: 3.13rem;
        background: rgba(237, 237, 237, 1);
        border-radius: 50%;
        img {
          width: 80%;
        }
      }
      .body {
        display: flex;
        flex-direction: column;
        margin-left: 1.2rem;
        span {
          font-size: 1.13rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: #666666;
          padding: 0.3rem 0;
        }
      }
      .map {
      }
    }
  }
}
</style>